<template>
    <span class="my-view">
        <Select v-model="showValue" multiple style="width:200px" @on-open-change="handelOpenChange">
            <Option v-for="item in showList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        <ModalView ref="modalView" @dataSelect="handleDataSelected"/>
    </span>
</template>

<script>
    import ModalView from './modalView'

    export default {
        props: {
            value: {
                default: ''
            },
            label: {

            },
            valType: {

            }
        },
        watch: {
            label: {
                handler() {
                    // this.showValue = this.label
                }
            },
            value: {
                immediate: true,
                deep: true,
                handler(value) {
                    if(value && value!=='null' && typeof(value) === 'string') {
                        let valarr = value.split(',')
                        let labelArr = []
                        if(typeof(this.label) === 'string') {
                            labelArr = this.label.split(',')
                        }
                        let showList = []
                        valarr.forEach((item, index)=>{
                            showList.push({
                                value: item,
                                label: labelArr[index]||item
                            })
                        })
                        this.showValue = valarr
                        this.showList = showList
                    }else{
                        this.showValue = []
                    }
                    // this.showValue = this.label
                }
            },
        },
        data() {
            return {
                showValue: [],
                showList: []
            }
        },
        components: {
            ModalView
        },
        methods: {
            handleDataSelected(selects=[]) {
                let selectData = []
                let showList = []
                selects.forEach(item=>{
                    selectData.push(item.id)
                    showList.push({
                        value: item.id,
                        label: item.couponName
                    })
                })
                this.showValue = selectData
                this.showList = showList
                this.$emit('selects', selects)
            },
            handelOpenChange(flag) {
                if(flag) {
                    let selectDatas = this.showValue.map(item=>{
                        return {
                            id: item
                        }
                    })
                    this.$refs.modalView.show(selectDatas);
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
.my-view{
    :deep(.ivu-select-dropdown){
        display: none;
    }
}
</style>